import React, { FC } from 'react'
import { Progress } from 'antd'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.scss'
import type { ProgressProps } from 'antd'
const Home: FC = () => {
  const nav = useNavigate()
  const twoColors: ProgressProps['strokeColor'] = {
    '0%': '#108ee9',
    '100%': '#87d068',
  }

  const conicColors: ProgressProps['strokeColor'] = {
    '0%': '#87d068',
    '50%': '#ffe58f',
    '100%': '#ffccc7',
  }
  return (
    <div className={styles.progress}>
      <div className={styles.progressFlex}>
        <Progress type="circle" percent={90} strokeColor={conicColors} />
        <Progress type="circle" percent={100} strokeColor={twoColors} />
      </div>
      <div className={styles.progressFlex}>
        <Progress type="dashboard" percent={90} strokeColor={twoColors} />
        <Progress type="dashboard" percent={80} strokeColor={conicColors} />
      </div>
    </div>
  )
}
export default Home
